<template>
  <ul class="tree-menu">
    <li
      v-for="item in items"
      :key="item.id"
      class="menu-item"
    >
      <div
        class="menu-header"
        @click="toggleItem(item)"
      >
        <span>{{ item.title }}</span>
        <span v-if="item.children">
          {{ item.isOpen ? '▼' : '▶' }}
        </span>
      </div>

      <TreeMenu
        v-if="item.children && item.isOpen"
        :items="item.children"
        @select="$emit('select', $event)"
      />
    </li>
  </ul>
</template>

<script setup>
import { defineProps,  defineEmits } from 'vue'

const props = defineProps({
  items: Array
})

const emit = defineEmits(['select'])

const toggleItem = (item) => {
  if (item.children) {
    item.isOpen = !item.isOpen
  } else {
    emit('select', item.id)
  }
}
</script>

<style scoped>
.tree-menu {
  color: #2c3e50; /* 深灰色文字 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,serif;
}

.menu-header {
  color: inherit;   /* 继承父元素颜色 */
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-header:hover {
  background-color: rgba(162, 186, 216, 0.8);
}
</style>